<template>
  <div class="bg">
    <div>
      <div class="topBtn">

        <div class="left">
            <span>总计划量(吨)：{{ objMes.数据字段0 }}</span>
        </div>
        <div>
            <el-dropdown trigger="click" style="margin-left:10px;margin-right:10px" @visible-change="changeIcon">
              <el-button>
                下拉按钮<i class="el-icon-arrow-down el-icon--right" v-if="displayIcon"></i>
                <i class="el-icon-arrow-up el-icon--right"  v-if="!displayIcon"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item> excel </el-dropdown-item>
                <el-dropdown-item> word </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
        </div>
      </div>
      <el-table :data="dataSource" style="width: 100%" border>
        <el-table-column label="订单信息" header-align="center">
          <template slot-scope="scope">
            <div style="height: 24px; margin: 8px 0 16px -10px">
              <div
                :style="{ background: scope.row.stateColor }"
                class="tagStyle"
              >
                {{ scope.row.isState }}
              </div>
            </div>
          
        <el-descriptions title="" :column="4">
              <el-descriptions-item
                label="生产订单号"
                ><span :style="{ color: scope.row.color?scope.row.color:'#606266'}">{{
                  scope.row.mes.filter(i=>'生产订单号'==i.label)[0].value
                }}</span>
                </el-descriptions-item>
        </el-descriptions>

          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-button
                  @click.native.prevent="deleteRow(scope.$index, tableData)"
                  type=" primary"
                  size="small"
                  style=""
                >
                  执行离厂
                </el-button>
              </el-col>
              <el-col :span="12">
                <el-button
                  @click.native.prevent="deleteRow(scope.$index, tableData)"
                  type=""
                  size="small"
                  style=""
                >
                  查看详情
                </el-button>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination
      v-if="paginationMes.total"
      v-show="paginationMes.total > 0"
      :total="paginationMes.total"
      :background="false"
      :page.sync="paginationMes.pageIndex"
      :limit.sync="paginationMes.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[10, 20, 50, 100]"
      @pagination="listPage"
    />
  </div>
</template>
<script>
// import {} from "@/api/devicePreview.js";
import Pagination from "@v/Pagination";
export default {
  data() {
    return {
      displayIcon:true,
      page: 1,
      limit: 10,
      total: 1, //todo 0
      // dataSource: [],
      // objMes: {}
    };
  },
  components: {
    Pagination,
  },
  props: {
    // height: {
    //   type: String,
    //   default: "200px",
    // },
    dataSource: {
      type: Array,
      default: () => {
        [];
      },
    },
    objMes: {
      type: Object,
      default: () => {},
    },
    paginationMes:{
      type:Object,
      default:()=>{}
    }
  },
  created() {},
  mounted() {},
  methods: {
    changeIcon(e){
        this.displayIcon = !this.displayIcon
    },
    listPage(e){
      this.$emit('sonRefreshTable',e)
    }
  },
};
</script>
<style lang="scss" scoped>
.bg {
  background: #fff;
  padding: 16px;
  .tagStyle {
    width: 66px;
    height: 24px;
    padding-left: 8px;
    border-bottom-right-radius: 4px;
    // margin-top: -2px;
    color: #fff;
  }
  .table-tit {
    background: #f4faff;
    height: 42px;
    line-height: 42px;
    border: solid 1px #d7d7d7;
    text-align: center;
    font-size: 14px;
    // color:#f4faff;
  }
  .valueColor {
    color: #e7e7e7;
  }
  .topBtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    .left {
      font-size: 14px;
      color: #333;
      span {
        margin-right: 16px;
      }
    }
  }
}
/deep/ .el-descriptions {
  background: transparent;
  .el-descriptions__body {
    background: transparent;
    tr {
      background-color: transparent !important;
      td {
        background: transparent;
        padding-bottom: 16px;
        padding-left: 16px;
        .el-descriptions-item__label {
          color: #000;
        }
      }
    }
  }
}
/deep/ .el-table__cell {
  padding: 0;
}
/deep/ .el-table__header-wrapper {
  th {
    background: #f4faff !important;
    height: 42px;
    line-height: 42px;
    font-size: 14px;
  }
}
/deep/ .el-table__fixed-right .el-table__fixed-header-wrapper {
  th {
    background: #f4faff !important;
    height: 42px;
    line-height: 42px;
    font-size: 14px;
  }
}
/deep/ .el-table__fixed-right .el-table__fixed-body-wrapper {
  tr {
    td {
      background: #f2f2f2 !important;
      .el-col:nth-child(even) {
        position: relative;
      }
      .el-col:nth-child(even)::before {
        content: "";
        display: block;
        width: 1px;
        height: 15px;
        background: #ccc;
        position: absolute;
        top: 7px; /* 调整上下边距 */
        // // left: 10px; /* 调整左右边距 */
        // right: 0px;
        // bottom: 5px;
        // border-left: 1px solid black;
      }
    }
  }
}
// 分页
/deep/ .pagination-container {
  text-align: right;
  .el-pagination__total {
    float: left;
  }
}
/deep/ .el-col {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/deep/ .el-row {
  // transition: height 0.3s ease-in-out;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
</style>